<template>
    <div class="register">
        <div class="input">
            <!-- <div class="title">预约挂号系统注册</div> -->
            <el-form
            :model="formModel"
            :rules="rules"
            ref="form"
            @keyup.enter="submit">
                <el-form-item prop="name">
                    <el-input
                    v-model="formModel.name"
                    style="width: 280px;"
                    size="default"
                    placeholder="请输入姓名"
                    :prefix-icon="User"/>
                </el-form-item>
                <el-form-item>
                    <el-select 
                    v-model="formModel.sex" 
                    placeholder="请输入性别">
                        <el-option label="男" value="mael" />
                        <el-option label="女" value="famale" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                    style="width: 100%;"
                    v-model="formModel.birthday"
                    type="date"
                    placeholder="请输入生日"/>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input
                    v-model="formModel.phone"
                    style="width: 280px;"
                    size="default"
                    placeholder="手机号码"
                    :prefix-icon="PhoneFilled"/>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input
                    v-model="formModel.email"
                    style="width: 280px;"
                    size="default"
                    placeholder="电子邮箱"
                    :prefix-icon="Message"/>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input
                    v-model="formModel.username"
                    style="width: 280px;"
                    size="default"
                    placeholder="用户名"
                    :prefix-icon="Avatar"/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                    v-model="formModel.password"
                    style="width: 280px;"
                    size="default"
                    type="password"
                    placeholder="请输入密码"
                    :prefix-icon="Key"
                    clearable/>
                </el-form-item>
                <el-form-item prop="passwordDb">
                    <el-input
                    v-model="formModel.passwordDb"
                    style="width: 280px;"
                    size="default"
                    type="password"
                    placeholder="请确认密码"
                    :prefix-icon="Lock"
                    clearable/>
                </el-form-item>  
            </el-form>
            <el-button type="primary" style="width: 280px;" @click="submit">注册</el-button>
            <div class="other">
                <el-link type="info" @click="toLog">去登录</el-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { User, Key, Message, PhoneFilled, Avatar, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { computed, reactive, ref } from 'vue'
import { register } from '@/api/login';
import dayjs from 'dayjs'; // 导入 day.js
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'Register'
})

const router = useRouter()

const formModel = reactive({
    name: '',
    sex: '',
    birthday: '',
    phone: '',
    email: '',
    username: '',
    password: '',
    passwordDb: ''
})

const rules = {
    name:{ pattern: /^[\u4E00-\u9FA5]+$/, message:'请输入正确姓名', trigger:'blur'},
    phone:{ pattern: /^1[3-9]\d{9}$/, message:'无效的手机号', trigger:'blur'},
    email:{ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message:'无效的电子邮箱', trigger:'blur'},
    username:{ min: 4, max: 20, message: '用户名必须是4~20位字符', trigger:'blur'},
    password:{ pattern: /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,15}$/ , message: '密码必须为6~15位字母、数字', trigger:'blur'},
    passwordDb:[
        { required: true, message: '请确认密码', trigger: 'blur' },
        { validator: validateConfirmPassword, trigger: 'blur' }
    ]
}

function validateConfirmPassword(rule, value, callback) {
    if (value === '') {
        callback(new Error('请确认密码'));
    } else if (value !== formModel.password) {
        callback(new Error('确认密码与密码不一致'));
    } else {
        callback(); // 验证通过
    }
}

function toLog(){
    router.replace('/log')
}

async function submit(){
    const birthday_format = dayjs(formModel.birthday).format('YYYY-MM-DD'); // 格式化后的日期
    const gender = computed(()=>{   // 性别格式化
        if(formModel.sex==='mael') return 'M'
        return 'F'
    })
    try {
        const response = await register({
            name: formModel.name,
            sex: gender.value,
            birthday: birthday_format,
            phone: formModel.phone,
            email: formModel.email,
            username: formModel.username,
            password: formModel.password,
            passwordDb: formModel.passwordDb
        })
        console.log('response',response)
        if(!response.status){
            ElMessage({
                message: response.msg,
                type: 'success',
                duration: 2000 
            })
            router.replace('/login')
        }else{
            ElMessage({
                message: response.msg,
                type: 'warning',
                duration: 2000 
            })
        }
    } catch {

    }
}
</script>

<style lang="scss" scoped>
.register {
    flex: 0 1 auto;
    flex-grow: 1;
    display: flex;
    justify-content: center;

    .input {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            text-align: center;
            font-size: 30px;
        }
        
        .other {
            width: 100%;
            margin: 2px 0;
            display: flex;
            justify-content: center;
        }
    }
}
</style>